<!-- 移动端发布页面 -->
<template>
  <div class="editor-container">
    <MarkdownEditor ref="editor" :uploadHandler="uploadImage" @change="handleChange" @publish="handlePublish" @cancel="handleCancel"
     ></MarkdownEditor>
  </div>
</template>

<script setup>
import MarkdownEditor from '../components/community/editor.vue';
import { ref, computed, onMounted, nextTick, h, getCurrentInstance } from 'vue'
import { ElMessage, ElLoading } from 'element-plus'
import network from '../api/index'
import usePost from '../hook/post.js'
const { loadLock, loading, page, pageSize,searchQuery,tag, user, loadPosts, } = usePost()
const { communityApi,userApi,uploadApi,request } = network
const editor = ref(null)
// 上传文件
const uploadImage = async (file) => {
  try {
    const formData = new FormData();
    formData.append('common', file, file.name);
    const { data } = await request(uploadApi.upload, formData, 'POST')
    console.log('上传响应:', data);
    return data.url;
  } catch (error) {
    console.log('上传错误:', error);
  }
}
// 监听编辑器输入
const handleChange = (value) => {
  console.log(value)
}
// 编辑器总数据
const handlePublish = async (value) => {
  console.log(value)
  try {
    const res = await request(communityApi.createPost, {
      userId: user.id,
      ...value,
      image_url: value.coverUrl,
    }, 'post')
    ElMessage.success('发布成功')
  } catch (error) {
    ElMessage.error('发布失败')
  }
}
const handleCancel = (value) => {
  editor.value.clear()
}
</script>

<style scoped lang="scss">
.editor-container {
  height: 100vh;
  margin: 0 auto;
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);

  @media (max-width: 768px) {
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
  }
}
</style>